<template>
  <div class="map-container">
    <div id="map"></div>
    <div class="control">
      <div class="item">
        <el-button type="primary" round size="small" @click="replyMap">复位地图</el-button>
      </div>
      <div class="item">
        <label>Marker点</label>
        <el-switch v-model="isMarker" @change="controlChange('isMarker')"></el-switch>
      </div>
      <div class="item">
        <label>风场</label>
        <el-switch v-model="isWindy" @change="controlChange('isWindy')"></el-switch>
      </div>
      <div class="item">
        <label>图片</label>
        <el-switch v-model="isImage" @change="controlChange('isImage')"></el-switch>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import 'leaflet.chinatmsproviders';
import "leaflet-velocity/dist/leaflet-velocity.css";
import 'leaflet-velocity';
import Icon from '../../assets/map/map.png';
export default {
  name: 'Leaflet',
  data() {
    return {
      // map: null,
      isWindy: false,
      isImage: false,
      isMarker: false,
      layer: {
        windy: null,
        Image: null,
        marker: null,
      },
    }
  },
  mounted() {
    this.initMap();
  },
  destroyed(){
    console.log('destroyed');
    this.map = null;
  },
  methods: {
    /**
     * 初始化图层
     */
    async initMap() {
      /**
       * 谷歌
       */
      var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
            maxZoom: 18,
            minZoom: 2
          }),
          satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
            maxZoom: 18,
            minZoom: 2
          });
      /**
       * 高德地图
       */
      var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
        maxZoom: 18,
        minZoom: 2
      });
      var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
        maxZoom: 18,
        minZoom: 2
      });
      var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
        maxZoom: 18,
        minZoom: 2
      });
      var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);

      var baseLayers = {
        // "谷歌地图": normalMap,
        // "谷歌影像": satelliteMap,
        "高德地图": Gaode,
        "高德影像": Gaodimage,

      }
      //创建地图实例
      this.map = L.map("map", {
        minZoom: 3,
        maxZoom: 14,
        center: [36.058039, 103.823557],
        zoom: 5,
        zoomControl: false,
        // layers: [satelliteMap],
        attributionControl: false,
        crs: L.CRS.EPSG3857
      });
      L.control.layers(baseLayers, null).addTo(this.map);
      L.control.zoom({
        zoomInTitle: '放大',
        zoomOutTitle: '缩小'
      }).addTo(this.map);
      // //添加一个瓦片图层
      L.tileLayer(
        "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
      ).addTo(this.map);

      //第二种添加图层方法
      // this.map.addLayer(normalMap);

    },
    /**
     * 初始化风场数据
     * @param {Object} data
     */
    async initVelocityLayer(data) {
      //风场数据
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      });
      //获取风场数据
      const windyData = await axios.get('http://82.157.67.249:7300/mock/60026ff357c55d06c47b1709/vue-sys/map/windy')
          .then(res => {
            loading.close();
            return res;
          });
      if (this.layer.windy) {
        this.map.removeLayer(this.layer.windy);
      }
      //实例化风场
      this.layer.windy = L.velocityLayer({
        displayValues: true,
        displayOptions: {
          velocityType: "Global Wind",
          position: "bottomleft",
          emptyString: "No velocity data",
          angleConvention: "bearingCW",
          displayPosition: "bottomleft",
          displayEmptyString: "No velocity data",
          speedUnit: "kt",
          directionString: "Direction",
          speedString: "Speed"
        },
        data: windyData.data.data, // see demo/*.json, or wind-js-server for example data service
        // OPTIONAL
        minVelocity: 0, // used to align color scale
        maxVelocity: 10, // used to align color scale
        velocityScale: 0.005, // modifier for particle animations, arbitrarily defaults to 0.005
        colorScale: [
          "rgb(89,248,30)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)",
          "rgb(255,255, 255)"
        ], // define your own array of hex/rgb colors
        onAdd: null, // callback function
        onRemove: null, // callback function
        opacity: 0.97, // layer opacity, default 0.97
        paneName: "overlayPane"
      }).addTo(this.map);
    },
    /**
     * 图片图册
     */
    initImageLayer() {
      var imageUrl =
              'https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/baike/pic/item/64380cd7912397dd4f7ad9675082b2b7d0a28756.jpg',
          imageBounds = [
            [36.058039, 103.823557],
            [43.158039, 88.623557]
          ];
      this.layer.image = L.imageOverlay(imageUrl, imageBounds).addTo(this.map);
    },
    /**
     *添加marker点
     */
    initMarker(){
      const myIcon = L.icon({
        iconUrl: Icon,
        iconSize: [38, 50],
        iconAnchor: [22, 94],
        popupAnchor: [-3, -76]
      });
      this.layer.marker = L.marker([36.058039, 103.823557],{icon: myIcon}).addTo(this.map);
    },
    /**
     * 复位地图
     */
    replyMap() {
      this.map.setView([36.058039, 103.823557], 5);
    },
    //控件开关事件
    controlChange(type) {
      if (type === 'isWindy') {
        if (this[type]) {
          this.initVelocityLayer();
        } else {
          this.map.removeLayer(this.layer.windy);
        }
      }
      if (type === 'isImage') {
        if (this[type]) {
          this.initImageLayer();
        } else {
          this.map.removeLayer(this.layer.image);
        }
      }
      if (type === 'isMarker') {
        if (this[type]) {
          this.initMarker();
        } else {
          this.map.removeLayer(this.layer.marker);
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped="">
.map-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;

  #map {
    width: 100%;
    height: 100%;
  }

  .control {
    background-color: #fff;
    position: absolute;
    top: 100px;
    left: 20px;
    z-index: 9999;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 2px #c0c0c0;

    .item {
      margin-bottom: 10px;
    }

    label {
      margin-right: 6px;
    }
  }
}
</style>
